<template>
	<!--导航栏-->
	<div class="wly-page">
		<!--内容-->
		<el-table border @header-dragend="headerDragend">
			<el-table-column min-width='250px' label-class-name="drag">
				<template slot="header" slot-scope="scope">
					<div class="grid-content bg-purple">
						<el-container>
							<el-header class="roleHeader" height="40px">
								<span>角色列表</span>
								<i class="el-icon-plus" @click="addRole" style="color: red;"></i>
							</el-header>
							<el-main style="height: 600px">
								<!--搜索框-->
								<el-input prefix-icon="el-icon-search" placeholder="搜索" v-model="input" clearable
									@clear="searchRole" @keyup.enter.native="searchRole">
								</el-input>
								<div class="role-list">
									<p v-for="item in roleData" :class="{'duty-class':true,select:item.roleId === roleId}" @click="queryRoleUser(item)">
									{{item.name}}
									<span class="duty-class-action">
										<el-button type="text" size="small" @click="editRole(item)" icon="el-icon-edit"></el-button>
										<el-button type="text" size="small" @click="deleteRole(item)" icon="el-icon-delete"></el-button>
									</span>
									</p>
									<p v-if="roleData.length ===0" style="text-align: center;">暂无数据</p>
								</div>
							</el-main>
						</el-container>
					</div>
				</template>
			</el-table-column>
			<el-table-column min-width='350px' :resizable="false">
				<template slot="header" slot-scope="scope">
					<div class="grid-content bg-purple">
						<el-header class="roleHeader" height="40px">
							<span>用户列表</span>
							<i class="el-icon-edit" @click="userEditForm" style="color: red;">用户分配角色</i>
						</el-header>
						<el-main style="height: 600px">
							<el-tag v-for="item in userData" :key="item.user_id" style="margin: 5px" color="white"
								effect="light">
								{{ item.username }}
							</el-tag>
						</el-main>
					</div>
				</template>
			</el-table-column>
			<template slot="empty"><span></span></template>
		</el-table>
		<user-edit-form ref="userEdit" @editSuccess="editSuccess"></user-edit-form>
		<ADialogCom @closeDialog='closeDialog' :title="title" @saved="queryRoleInfo" comName="RoleForm" ref="ADialogCom"
			:dialog-open="dialogVisible2"></ADialogCom>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
			<span>确认删除的记录</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmDeleteRole">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import ajax from '@api/ajax'
import {
QUERY_ROLE_INFO,
QUERY_USER_INFO,
ROLE_MAINTAIN
} from '@api/url'
import RoleForm from './RoleForm'
import UserEditForm from './UserEditForm'
export default {
	components: {
		UserEditForm,
		RoleForm
	},
	data() {
		return {
			input: '',
			roleData: [], // 角色数据
			userData: [], // 用户数据
			roleId: '', // 角色id
			deleteRoleId: '', // 即将删除的角色id
			dialogVisible: false,
			dialogVisible2: false,
			clickEvent: 'false', // 点击编辑用户前，是否查询过角色下的用户
			title: ''
		}
	},
	methods: {
		headerDragend(newWidth, oldWidth, column, event) {
			if (newWidth < 350) {
				column.width = 350
			} else if (newWidth > 600) {
				column.width = 600
			}

		},
		// 导航栏切换
		handleSelect(key, keyPath) {
			if (key === '1') {
				this.$router.replace({
					path: '/home/AllUserIndex'
				})
			}
			if (key === '2') {
				this.$router.replace({
					path: '/home/OrganizationIndex'
				})
			}
		},
		// 查询角色信息
		queryRoleInfo() {
			this.dialogVisible2 = false
			ajax.post(QUERY_ROLE_INFO).then(res => {
				this.roleData = res.data
			}).catch(err => {
				console.error('查询发生错误！', err)
			}).finally(() => { })
		},
		// 查询角色下用户信息
		queryRoleUser(row) {
			this.roleId = row.roleId
			ajax.post(QUERY_USER_INFO, {
				role: row.roleId
			}).then(res => {
				this.userData = res.data.records
			}).catch(err => {
				console.error('查询发生错误！', err)
			}).finally(() => { })
			this.clickEvent = 'true'
		},
		// 点击编辑用户，打开用户编辑页面
		userEditForm() {
			if (this.clickEvent === 'false') {
				this.$message.warning('请先选择角色')
				return
			}
			this.$refs.userEdit.userEditFormDialog(this.userData, this.roleId, 'role')
		},
		// 打开新增角色页面
		addRole() {
			this.dialogVisible2 = true
			this.title = '角色新增'
			this.$nextTick(() => {
				this.$refs.ADialogCom.aDialogComRef.RoleForm.showForm({}, 'add')
			})
		},
		// 打开编辑角色页面
		editRole(data) {
			this.dialogVisible2 = true
			this.title = '角色编辑'
			this.$nextTick(() => {
				this.$refs.ADialogCom.aDialogComRef.RoleForm.showForm(data, 'edit')
			})
		},
		// 点击删除角色按钮后将删除id存起来
		deleteRole(data) {
			this.deleteRoleId = data.roleId
			this.dialogVisible = true
		},
		// 根据搜索条件查询角色
		searchRole() {
			let conditions = {}
			conditions.name = this.input
			ajax.post(QUERY_ROLE_INFO, conditions).then(res => {
				this.roleData = res.data
			}).catch(err => { }).finally(() => { })
		},
		// 确认删除角色后调用的方法
		confirmDeleteRole() {
			let Conditions = {}
			Conditions.roleId = this.deleteRoleId
			Conditions.optMode = 'D'
			ajax.post(ROLE_MAINTAIN, Conditions).then(res => {
				this.$message.success('成功')
				this.dialogVisible = false
				this.queryRoleInfo()
			}).catch(err => {
				console.error('查询发生错误！', err)
			})
		},
		// 用户编辑成功后调用的方法，重新查询角色下的用户
		editSuccess(data) {
			let conditions = {}
			conditions.roleId = data
			this.queryRoleUser(conditions)
		},
		closeDialog() {
			this.dialogVisible2 = false
		}

	},
	mounted() {
		this.queryRoleInfo()
		
	}
}
</script>

<style scoped lang="stylus">
.wly-page /deep/ {
	.el-table__empty-block {
		display: none;
	}

	th.el-table__cell {
		vertical-align: top;
		font-weight: 400;

		&.drag {
			overflow: visible;

			&:after {
				content: '';
				position: absolute;
				z-index: 999;
				top: 50%;
				color: red;
				display: inline-block;
				width: 15px;
				height: 18px;
				background-image: url('~@asst/image/dotted.png');
				background-size: 100% 100%;
				left: 100%;
				transform: translateX(-50%);
			}
		}
	}

	.wly-page-col {
		min-width: 250px;
	}
	.role-list{
		margin-top:10px;
	}
	.duty-class{
			color: #666666;
			padding: 0 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all 0.6s;
			margin: 0;
			.duty-class-action{
					visibility hidden
				}
			&:hover,&.select{
				background-image: linear-gradient(270deg, #FFEBEB 0%, #FFD5DC 100%);
				border-radius: 5px;
				color: #F95160;
				transition: all 0.3s;
				.duty-class-action{
					visibility:visible
				}
			}
		}
}

.roleHeader {
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid whitesmoke;
	align-items: center;
}

/*修改子菜单的背景色：*/
.el-menu-item {
	border-radius: 0;
	background-color: white !important;
}

/*字体颜色：*/
.el-aside {
	color: #f04959;
}

/*鼠标悬浮时，子菜单的样式：*/
.el-menu-item:hover {
	border-radius: 0;
	outline: 0 !important;
	color: #409EFF !important;
}

.el-menu-item.is-active {
	color: white !important;
	background: #f04959 !important;
	border-radius: 0 !important;
}

/*鼠标悬浮时，主菜单的样式：*/
.el-submenu__title:focus,
.el-submenu__title:hover {
	outline: 0 !important;
	color: white !important;
	background: #f04959 !important;
}

.el-menu-demo {
	margin: 15px 0 15px 0px
}</style>